<template>
  <view class="">
    <view class="center-video-list">
      <view
        class="video-item"
        v-for="(item, index) in videoList"
        :key="item.data.vid"
        @click="itemClick(index)"
      >
        <image :src="item.data.coverUrl" mode="" v-if="currentIndex !== index"></image>
        <video :src="item.data.urlInfo.url" controls v-else autoplay loop></video>
        <view class="icon" v-show="currentIndex !== index">
          <text class="iconfont icon-aixin1"></text>
          <text>9999w</text>
        </view>
        <text class="iconfont icon-bofang1" v-show="currentIndex !== index"></text>
      </view>
    </view>
    <view class="more">没有更多了...</view>
  </view>
</template>

<script>
export default {
  name: 'CenterVideoList',
  data() {
    return { currentIndex: -1 }
  },
  props: {
    videoList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.center-video-list {
  display: flex;
  flex-wrap: wrap;
  .video-item {
    width: 30%;
    margin-left: 1.7%;
    height: 300rpx;
    position: relative;
    overflow: hidden;
    border: 4rpx solid #000;
    margin-top: 20rpx;
    image {
      width: 100%;
      height: 100%;
    }
    video {
      width: 100%;
      height: 100%;
    }
    .icon {
      position: absolute;
      bottom: 20rpx;
      left: 20rpx;
      color: #eee;
      text {
        font-size: 28rpx;
      }
      .icon-aixin1 {
        margin-right: 10rpx;
      }
    }
    .icon-bofang1 {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 44rpx;
      color: #fff;
    }
  }
}
.more {
  height: 98rpx;
  text-align: center;
  line-height: 98rpx;
  color: #fff;
  margin-bottom: 98rpx;
}
</style>
